<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="我的客服" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="content-item custServ-tipc flex align-center">
				<u-avatar size="100" mode="circle" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png"></u-avatar>
				<view class="serv-tipc">你好，我是智能客服小趣，有问题小趣来帮你~</view>
			</view>
			<view class="content-item">
				<view class="purse-title flex justify-between">
					<view 
					 class="title-item"
					 v-for="(item,index) in title_list" 
					 :key="index"
					 @click="purseTitle(index)"
					 >
						<view :class="title_index==index?'title title-after':'title'">{{item}}</view>
					</view>
				</view>
				<swiper :current="swiperCurrent" @change="swiperchange" class="detailed-list" :style="{'height':windowHeight+'px'}">
					<swiper-item class="swiper-item">
						<scroll-view class="list-content" scroll-y :style="{'height':windowHeight+'px'}" style="padding-bottom: 200rpx;">
							<view class="item">
								<view class="problem-cont">
									<view class="text-list">本产品是做什么的</view>
									<view class="text-list">加入本产品的好处</view>
									<view class="text-list">安全怎么保障</view>
									<view class="text-list">平台服务宗旨</view>
								</view>
								<view class="text-right">
									<view class="serv-tipc qa-tipc">本产品是做什么的</view>
								</view>
								<view class="qa-content">
									<view class="title f30">本产品是做什么的</view>
									<u-read-more 
									show-height="200" 
									close-text="展开"
									font-size="24"
									color="#999999"
									text-indent="0"
									class="more-cont">
										<view class="context-box padding-bottom">
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
										</view>
									</u-read-more>
									<u-gap height="1" bg-color="#F7F7F7"></u-gap>
									<view class="flex justify-center" style="padding: 40rpx 0;">
										<view class="flex justify-center align-center" style="width: 40%;border-right: 1rpx solid #F7F7F7;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yy.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">有用</text>
										</view>
										<view class="flex justify-center align-center" style="width: 40%;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_my.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">没用</text>
										</view>
									</view>
								</view>
							<view class="text-right">
									<view class="serv-tipc qa-tipc">本产品是做什么的</view>
								</view>
								<view class="qa-content">
									<view class="title f30">本产品是做什么的</view>
									<u-read-more 
									show-height="200" 
									close-text="展开"
									font-size="24"
									color="#999999"
									text-indent="0"
									class="more-cont">
										<view class="context-box padding-bottom">
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
										</view>
									</u-read-more>
									<u-gap height="1" bg-color="#F7F7F7"></u-gap>
									<view class="flex justify-center" style="padding: 40rpx 0;">
										<view class="flex justify-center align-center" style="width: 40%;border-right: 1rpx solid #F7F7F7;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yy.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">有用</text>
										</view>
										<view class="flex justify-center align-center" style="width: 40%;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_my.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">没用</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view class="list-content" scroll-y :style="{'height':windowHeight+'px'}" style="padding-bottom: 200rpx;">
							<view class="item">
								<view class="problem-cont">
									<view class="text-list">本产品是做什么的</view>
									<view class="text-list">加入本产品的好处</view>
									<view class="text-list">安全怎么保障</view>
									<view class="text-list">平台服务宗旨</view>
								</view>
								<view class="text-right">
									<view class="serv-tipc qa-tipc">本产品是做什么的</view>
								</view>
								<view class="qa-content">
									<view class="title f30">本产品是做什么的</view>
									<u-read-more 
									show-height="200" 
									close-text="展开"
									font-size="24"
									color="#999999"
									text-indent="0"
									class="more-cont">
										<view class="context-box padding-bottom">
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
										</view>
									</u-read-more>
									<u-gap height="1" bg-color="#F7F7F7"></u-gap>
									<view class="flex justify-center" style="padding: 40rpx 0;">
										<view class="flex justify-center align-center" style="width: 40%;border-right: 1rpx solid #F7F7F7;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yy.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">有用</text>
										</view>
										<view class="flex justify-center align-center" style="width: 40%;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_my.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">没用</text>
										</view>
									</view>
								</view>
							<view class="text-right">
									<view class="serv-tipc qa-tipc">本产品是做什么的</view>
								</view>
								<view class="qa-content">
									<view class="title f30">本产品是做什么的</view>
									<u-read-more 
									show-height="200" 
									close-text="展开"
									font-size="24"
									color="#999999"
									text-indent="0"
									class="more-cont">
										<view class="context-box padding-bottom">
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
											哈哈哈本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的本产品是做什么的
										</view>
									</u-read-more>
									<u-gap height="1" bg-color="#F7F7F7"></u-gap>
									<view class="flex justify-center" style="padding: 40rpx 0;">
										<view class="flex justify-center align-center" style="width: 40%;border-right: 1rpx solid #F7F7F7;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yy.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">有用</text>
										</view>
										<view class="flex justify-center align-center" style="width: 40%;">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_my.png" style="width: 30rpx;height: 32rpx;"></image>
											<text class="margin-left-sm f26" style="color: #999999;">没用</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		
			<view class="page-bottom flex align-center justify-center">
				<view>人工客服:15623251232</view>
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_copy.png" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;"></image>
			</view>

		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			title_index:0,
			swiperCurrent:0,
			windowHeight:0,
			title_list:["关于产品","产品使用","质量三包","平台资质"],
		};
	},
	onShow() {
		
	},
	onLoad(e) {
		var _this = this;
		uni.getSystemInfo({
		    success: function (res) {
				_this.windowHeight = res.windowHeight
		    }
		});
	},
	methods: {
		purseTitle(index){
			this.swiperCurrent = index
		},
		swiperchange(index){
			this.title_index = index.detail.current;
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	width: 100vw;
	height: 100vh;
	background: #F7F7F7 !important;
}

.content_box {	
	.serv-tipc{
		padding: 28rpx 30rpx;
		color: #6e6e6e;
		font-size: 24rpx;
		position: relative;
		background: #ffffff;
		border-radius: 20rpx;
		margin-left: 26rpx;
		&::before{
			position: absolute;
			content: "";
			width: 20rpx;
			height: 20rpx;
			background: white;
			transform:rotate(45deg);
			top: 45%;
			left: -10rpx;
		}
	}
	.qa-tipc{
		margin: 30rpx 20rpx 30rpx 0;
		display: inline-block;
		color: white;
		background: #FFB81E;
		&::before{
			background: #FFB81E;
			left: auto;
			right: -10rpx;
			
		}
	}
	.purse-title{
		margin-top: 20rpx;
		.title-item{
			display: flex;
			justify-content: center;	
			padding: 0 20rpx;
			.title{
				font-weight: 500;
				color: #717171;
				font-family: PingFang SC, PingFang SC-Bold;
			}
			.title-after{
				position: relative;
				color: #232323;		
				z-index: 1;
				font-size: 30rpx;
				font-weight: 700;
				&::before{
					content: '';
					width: 130rpx;
					height: 8rpx;
					background: #ffcc00;
					position: absolute;
					left: -6rpx;
					bottom: 8rpx;
					z-index: -1;
				}
			}
		}		
	}
	.detailed-list{
		padding: 30rpx 0;
		.swiper-item{
			.list-content{
				.item{
					.problem-cont{
						padding: 0 30rpx;
						background: #ffffff;
						border-radius: 20rpx;
						.text-list{
							padding: 40rpx 0;
							border-bottom: 1rpx solid #F7F7F7;
						}
					}
					.qa-content{
						background: #ffffff;
						border-radius: 20rpx;
						padding: 0 20rpx;
						.title{
							padding: 40rpx 0 30rpx 0;
						}
						.more-cont{
							margin-top: 30rpx;
						}
						.context-box{
							line-height: 50rpx;
							font-size: 26rpx;
							color: #717171;
						}
					}
					
				}
			}
		}
	}
	.page-bottom{
		position: fixed;
		width: 100%;
		background: white;
		left: 0;
		bottom: 0;
		padding: 36rpx 0 70rpx;
	}
}
</style>
